I am trying to compile bootstrap with Brunch in Phoenix. I have deployed a simple collapse nav to heroku, but the nav button doesn't activate on resize: https://hidden-wildwood-14271.herokuapp.com/test
If you look at the <head> in the source code, you'll see this:
<link rel="stylesheet" href="/css/app.css">
<script src="/js/app.js"></script>
<!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">-->
<!--<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>-->
When these links/scripts are uncommented, this nav bar works just fine (assuming you're doing this from a local/non-https, like heroku in production). Instead I have to use the Brunch-compiled css/app.css and js/app.jsat the top. Those file contain exactly the same code as the referenced files in comments (bootstrap css, jquery/bootstrap js).
I'm also getting this error in the console, and have no idea what it means:
Uncaught Error: Cannot find module 'web/static/js/app' from '/'
Also, this is what my brunch-config looks like (very little difference from default configuration):
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
// To use a separate vendor.js bundle, specify two files path
// http://brunch.io/docs/config#-files-
// joinTo: {
// "js/app.js": /^(web\/static\/js)/,
// "js/vendor.js": /^(web\/static\/vendor)|(deps)/
// }
//
// To change the order of concatenation of files, explicitly mention here
// order: {
// before: [
// "web/static/vendor/js/jquery-2.1.1.js",
// "web/static/vendor/js/bootstrap.min.js"
// ]
// }
},
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["web/static/css/app.css"] // concat app.css last
}
},
templates: {
joinTo: "js/app.js",
order: {
before: ["web/static/js/app.js"]
}
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to "/web/static/assets". Files in this directory
// will be copied to `paths.public`, which is "priv/static" by default.
assets: /^(web\/static\/assets)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: [
"web/static",
"test/static"
],
// Where to compile files to
public: "priv/static"
},
// Configure your plugins
plugins: {
sass: {
options: {
// Use includePaths to allow sass to load files outside your tree
// For example, from node_modules
//includePaths: ['app/css']
}
},
postcss: {
processors: [
require('autoprefixer')(['last 8 versions'])
]
},
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/]
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
},
npm: {
enabled: true
}
};
Related
How to add a custom plugin, more specifically the Inline widget plugin as mentioned in the example of the documentation of CKEditor in vue CKEditor ?
I have tried to follow the CKEditor setup process using CKEditor from source.
Since Laravel Vue doesn't have vue.config.js i have copied the same code on webpack.mix.js. Initially it failed to complied with an error
Module not found: Error: Can't resolve './#ckeditor/ckeditor5-ui/theme/mixins/_rwd.css' in '
But after removing some of the plugins such as `LinkPlugin, it complies but it run into another error
app.js?id=00c39e33120645d3026e:82180 TypeError: Cannot read properties of null (reading 'getAttribute')
at IconView._updateXMLContent (app.js?id=00c39e33120645d3026e:63098)
at IconView.render (app.js?id=00c39e33120645d3026e:63074)
at IconView.<anonymous> (app.js?id=00c39e33120645d3026e:80777)
at IconView.fire (app.js?id=00c39e33120645d3026e:78186)
at IconView.<computed> [as render] (app.js?id=00c39e33120645d3026e:80781)
at ViewCollection._renderViewIntoCollectionParent (app.js?id=00c39e33120645d3026e:72022)
at ViewCollection.<anonymous> (app.js?id=00c39e33120645d3026e:71883)
at ViewCollection.fire (app.js?id=00c39e33120645d3026e:78186)
at ViewCollection.addMany (app.js?id=00c39e33120645d3026e:74031)
at ViewCollection.add (app.js?id=00c39e33120645d3026e:73996)
Same issue as mentioned here
https://github.com/ckeditor/ckeditor5-vue/issues/24#issuecomment-947333698
But this solution didn't work for me.
Here is my complete webpack.mix.js file
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version();
const path = require('path');
const CKEditorWebpackPlugin = require('#ckeditor/ckeditor5-dev-webpack-plugin');
const {styles} = require('#ckeditor/ckeditor5-dev-utils');
module.exports = {
// The source of CKEditor is encapsulated in ES6 modules. By default, the code
// from the node_modules directory is not transpiled, so you must explicitly tell
// the CLI tools to transpile JavaScript files in all ckeditor5-* modules.
transpileDependencies: [
/ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/,
],
configureWebpack: {
plugins: [
// CKEditor needs its own plugin to be built using webpack.
new CKEditorWebpackPlugin({
// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
language: 'en',
// Append translations to the file matching the `app` name.
translationsOutputFile: /app/
})
]
},
// Vue CLI would normally use its own loader to load .svg and .css files, however:
// 1. The icons used by CKEditor must be loaded using raw-loader,
// 2. The CSS used by CKEditor must be transpiled using PostCSS to load properly.
chainWebpack: config => {
// (1.) To handle editor icons, get the default rule for *.svg files first:
const svgRule = config.module.rule('svg');
// More rule
const filesRuleIndex = config.module.rules.findIndex(item => {
return item.test.test('.svg')
})
if (filesRuleIndex !== -1) {
config.module.rules[filesRuleIndex].test = /\.(png|jpe?g|gif|webp)$/
const svgRule = {...config.module.rules[filesRuleIndex]}
svgRule.test = /\.svg/
svgRule.exclude = svgRule.exclude || []
svgRule.exclude.push(path.join(__dirname, 'node_modules', '#ckeditor'))
config.module.rules.push(svgRule)
}
config.module.rules.push({
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: ["raw-loader"]
})
// Then you can either:
//
// * clear all loaders for existing 'svg' rule:
//
// svgRule.uses.clear();
//
// * or exclude ckeditor directory from node_modules:
svgRule.exclude.add(path.join(__dirname, 'node_modules', '#ckeditor'));
// Add an entry for *.svg files belonging to CKEditor. You can either:
//
// * modify the existing 'svg' rule:
//
// svgRule.use( 'raw-loader' ).loader( 'raw-loader' );
//
// * or add a new one:
config.module
.rule('cke-svg')
.test(/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/)
.use('raw-loader')
.loader('raw-loader');
// (2.) Transpile the .css files imported by the editor using PostCSS.
// Make sure only the CSS belonging to ckeditor5-* packages is processed this way.
config.module
.rule('cke-css')
.test(/ckeditor5-[^/\\]+[/\\].+\.css$/)
.use('postcss-loader')
.loader('postcss-loader')
.tap(() => {
return styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve('#ckeditor/ckeditor5-theme-lark'),
},
minify: true
});
});
},
};
Can anyone please tell me what is the proper way of setting this CKEditor to work with custom plugins
And my vue component script is like this
import CKEditor from '#ckeditor/ckeditor5-vue2';
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '#ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '#ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '#ckeditor/ckeditor5-basic-styles/src/italic';
//import LinkPlugin from '#ckeditor/ckeditor5-link/src/link';
import ParagraphPlugin from '#ckeditor/ckeditor5-paragraph/src/paragraph';
//Custom Plugin same as in the documentation mentioned above,
//import Placeholder from "../../editor-plugins/Placeholder"; // Commented out
export default {
name: "AddEditDocuments",
props: {},
components:{
ckeditor: CKEditor.component
},
data() {
return {
editor: ClassicEditor,
editorData: '',
editorConfig: {
plugins: [
EssentialsPlugin,
BoldPlugin,
ItalicPlugin,
// LinkPlugin,
ParagraphPlugin
],
toolbar: {
items: [
'bold',
'italic',
'link',
'undo',
'redo'
]
}
},\
}
Packages:
Laravel : 8.76.1
Vue 2
CKEditor 5
Dont use CKEditor5 as it has some bugs in its editor just because of this i was also switch to CKEditor 4. After installing CKeditor using npm use it in the component. No need to configure it globally.
<template>
<ckeditor v-model="obj[name]" :config="editorConfig" ></ckeditor>
</template>
<script>
import CKEditor from 'ckeditor4-vue';
export default {
name: "Ckeditor",
props: {
obj: {
type: Object,
required: true,
},
name: {
type: String,
required: true,
}
},
components: {
ckeditor: CKEditor.component
},
data(){
return {
editorConfig: {
toolbar: [
[
'Bold',
'Italic',
'Link',
'BulletedList',
'NumberedList',
'Undo',
'Redo',
]
],
removePlugins: 'elementspath',
extraPlugins: 'filebrowser,uploadimage',
height: 100,
resize_enabled:false,
}
}
}
}
</script>
<style scoped>
</style>
(Beginner post)
I used Grunt for this tree :
Gruntfile.js :
module.exports = function(grunt) {
grunt.initConfig({
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'css/style.css': 'Component/**/*.scss',
}
}
},
watch: {
css: {
files: 'Component/**/*.scss',
tasks: ['sass']
},
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
It runs without any errors, but it don't take any file. The style.css still empty.
When I replace this line :
files: {
'css/style.css': 'Component/**/*.scss',
}
with :
files: {
'css/style.css': 'Component/header/header.scss',
}
Its takes the .css file in header/ correctly.
I don't have any error with either of these two syntaxes.
Any idea ?
You need to use the grunt files pattern to get all the files recursively in the sources folder:
module.exports = function(grunt) {
grunt.initConfig({
sass: {
dist: {
options: {
style: 'expanded'
},
files: [{
expand: true,
cwd: 'Component/',
src: ['**/*.scss'],
dest: 'css/',
ext: '.css'
}]
}
},
watch: {
css: {
files: ['Component/**/*.scss'],
tasks: ['sass']
},
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
To use Grunt file patterns you need to specify an object with options instead of the default setting in the form of 'destination': 'source'. The file pattern object has the following options:
{
// source directory
cwd: String,
// creates the subdirectories or flatten the content to the destination directory
flatten: Boolean,
// remove anything and after the file extension and replace with the ext String
ext: String,
// destination folder
dest: String,
// source file pattern using minimatch to match files
src: String|Array
}
More about Grunt file patterns and minimatch file matching patterns.
Edit to achieve the desired result (have all the components compiled in to a single file), you will need to do the following:
Change the filenames of all of your components, for example change Component/header/header.scss to Component/header/_header.scss. Files prefixed with _ will not create any output (Sass default behavior).
Then create a bootstrap file (let's call is style.scss, containing only the reference to the files you want to merge in to your output css file. For each file add #import 'header/header'; for header/_header.scss. You don't need to add the extension or the _ prefix.
Change the files definition of you sass:dist task to: { 'css/style.css' : ['Component/style.scss'] }
Gruntfile.js will now look like this:
module.exports = function(grunt) {
grunt.initConfig({
sass: {
dist: {
options: {
style: 'expanded'
},
files: { 'css/style.css' : ['Component/style.scss'] }
}
},
watch: {
css: {
files: ['Component/**/*.scss'],
tasks: ['sass']
},
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
That will compile Component/style.scss (containing the reference to all your components files) in to css/style.css.
Is it possible to write unit tests for VueJs if you are using Laravel's Elixir for your webpack configuration?
VueJs 2x has a very simple example for a component test: Vue Guide Unit testing
<template>
<span>{{ message }}</span>
</template>
<script>
export default {
data () {
return {
message: 'hello!'
}
},
created () {
this.message = 'bye!'
}
}
</script>
and then...
// Import Vue and the component being tested
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'
describe('MyComponent', () => {
it('has a created hook', () => {
expect(typeof MyComponent.created).toBe('function')
})
it ...etc
})
and gives an example of a karma conf file here: https://github.com/vuejs-templates
But the Karma configuration file requires a webpack configuration file
webpack: webpackConfig,
The only problem is the Laravel's Elixir is creating the webpack configuration so it can't be included.
I have tried creating another webpack configuration file based on the example from https://github.com/vuejs-templates/webpack.
Something like this:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
and included it like...
// Karma configuration
// Generated on Wed Mar 15 2017 09:47:48 GMT-0500 (CDT)
var webpackConf = require('./karma.webpack.config.js');
delete webpackConf.entry;
module.exports = function(config) {
config.set({
webpack: webpackConf, // Pass your webpack.config.js file's content
webpackMiddleware: {
noInfo: true,
stats: 'errors-only'
},
But I am getting errors that seem to indicate that webpack isn't doing anything.
ERROR in ./resources/assets/js/components/test.vue
Module parse failed: /var/www/test/resources/assets/js/components/test.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <span >{{test}}</span>
| </template>
Ok, I got this to work. Couple of things that might help.
I was originally running gulp, and trying to run tests in my vagrant box, to try to match the server configuration. I think that makes it much harder to find examples and answers on the internet.
Ok, so the main problem I was having is that webpack wasn't processing my components included in my test files. I copied the webpack config out of the laravel-elixir-vue-2/index.js node module directly into the Karma configuration file and it started working.
The key is that karma-webpack plugin needs both the resolve and module loader configuration settings (resolve with alias and extensions) for it to work.
Hope this helps someone.
karma.conf.js:
module.exports = function (config) {
config.set({
// to run in additional browsers:
// 1. install corresponding karma launcher
// http://karma-runner.github.io/0.13/config/browsers.html
// 2. add it to the `browsers` array below.
browsers: ['Chrome'],
frameworks: ['jasmine'],
files: ['./index.js'],
preprocessors: {
'./index.js': ['webpack']
},
webpack: {
resolve: {
alias: {
vue: 'vue/dist/vue.common.js'
},
extensions: ['.js', '.vue']
},
vue: {
buble: {
objectAssign: 'Object.assign'
}
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'file-loader',
query: {
limit: 10000,
name: '../img/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: '../fonts/[name].[hash:7].[ext]'
}
}
]
}
},
webpackMiddleware: {
noInfo: true,
},
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' },
]
},
});
};
I ran into the exact same problem. The accepted answer did not fully work for me. The following solved my issue:
Install relevant loaders for webpack:
npm install --save-dev vue-loader file-loader url-loader
Create webpack config file (note the format). The accepted answer produced errors citing invalid format of the webpack.config.js file. At least with me it did.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
use: [
{ loader: 'vue-loader' }
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'file-loader',
query: {
limit: 10000,
name: '../img/[name].[hash:7].[ext]'
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: [
{
loader: 'url-loader',
query: {
limit: 10000,
name: '../fonts/[name].[hash:7].[ext]'
}
}
]
}
]
}
}
karma.conf.js
// Karma configuration
var webpackConf = require('./webpack.config.js');
delete webpackConf.entry
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
port: 9876, // web server port
colors: true,
logLevel: config.LOG_INFO,
reporters: ['progress'], // dots, progress
autoWatch: true, // enable / disable watching files & then run tests
browsers: ['Chrome'], //'PhantomJS', 'Firefox',
singleRun: true, // if true, Karma captures browsers, runs the tests and exits
concurrency: Infinity, // how many browser should be started simultaneous
webpack: webpackConf, // Pass your webpack.config.js file's content
webpackMiddleware: {
noInfo: true,
stats: 'errors-only'
},
/**
* base path that will be used to resolve all patterns (eg. files, exclude)
* This should be your JS Folder where all source javascript
* files are located.
*/
basePath: './resources/assets/js/',
/**
* list of files / patterns to load in the browser
* The pattern just says load all files within a
* tests directory including subdirectories
**/
files: [
{pattern: 'tests/*.js', watched: false},
{pattern: 'tests/**/*.js', watched: false}
],
// list of files to exclude
exclude: [
],
/**
* pre-process matching files before serving them to the browser
* Add your App entry point as well as your Tests files which should be
* stored under the tests directory in your basePath also this expects
* you to save your tests with a .spec.js file extension. This assumes we
* are writing in ES6 and would run our file through babel before webpack.
*/
preprocessors: {
'app.js': ['webpack', 'babel'],
'tests/**/*.spec.js': ['babel', 'webpack']
},
})
}
Then run karma start and everything should work.
I'm totally new to the concept of testing, and i need one solid example on how to do it in my project:
I have a gulp file goes like this (Not all of it, just the important portions)
gulp.task('bundle', function() {
gulp.src('public/angular-app/main.js')
.pipe(browserify({
debug: true
}))
.pipe(gulp.dest('public/min-js'));
});
This is a slight portion of my main.js:
'use strict';
angular.module('myApp', [
'ui.router',
'ui.bootstrap',
'ngSanitize',
'ngFx',
...
], ['$interpolateProvider',
function($interpolateProvider) {
$interpolateProvider.startSymbol('{{');
$interpolateProvider.endSymbol('}}');
}
])
.config(require('./config/routes'))
.config(require('./config/authInterceptor'))
.run(require('./config/runPhase'))
.run(require('./config/xeditable'))
.controller('homeController', require('./controllers/homeController'))
.controller('modalInstanceCtrl', require('./controllers/modalInstanceCtrl'))
.controller('modalparticipantCtrl',require('./controllers/modalParticipantCtrl'))
.controller('generatorController',require('./controllers/generatorController'))
.controller('navController', require('./controllers/navController'))
.controller('signInController', require('./controllers/signInController'))
.controller('pricingController', require('./controllers/pricingController'))
.controller('howItWorksController',require('./controllers/howItWorks'))
...
Now this is my config file for karma:
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'public/vendor/jquery/dist/jquery.js',
'public/vendor/angular/angular.js',
'public/vendor/angular-mocks/angular-mocks.js',
'public/angular-app/**/*.js',
'test/**/*Spec.js'
],
// list of files to exclude
exclude: [
],
When i run karma with karma start this is what i get:
Uncaught reference error:require is not defined
at root/public/angular-app/main.js
So my question is simple, how can i do tests, for example, on my homeController...
//update
So I updated my test file to this:
describe("An Angularjs test suite",function(){
var target, rootScope;
beforeEach(inject(function($rootScope) {
rootScope = $rootScope;
// Mock everything here
spyOn(rootScope, "$on")
}));
beforeEach(inject(function(homeController) {
target = homeController;
}));
it('should have called rootScope.$on', function(){
expect(rootScope.$on).toHaveBeenCalled();
});
});
and my config file to this:
// list of files / patterns to load in the browser
files: [
'public/vendor/jquery/dist/jquery.js',
'public/vendor/angular/angular.js',
'public/vendor/angular-mocks/angular-mocks.js',
'public/min-js/main.js',
'test/**/*Spec.js'
],
// list of files to exclude
exclude: [
],
browserify: {
watch: true,
debug: true
},
preprocessors: {
'test/*': ['browserify']
},
Still nothing works, first he says 'unknown provider homeControllerProvider',
Now if i delete them lines:
beforeEach(inject(function(homeController) {
target = homeController;
}));
it still gives me error, expected spy $on to be called, How do i fix this?
You need to inform Karma to run Browserify before running tests.
You can add this in your Karma config:
{
browserify: {
watch: true,
debug: true
},
preprocessors: {
'test/*': ['browserify']
}
}
Karma config file reference: http://karma-runner.github.io/0.12/config/configuration-file.html
Or have a look at one of of my projects that uses Karma for testing: smild.
I am trying to run grunt on an existing project on a windows 8 machine.
I've installed grunt-cli globally,by running:
npm install -g grunt-cli
However when trying to run the project with:
grunt develop
I get this error:
Warning: Unable to write "preview.html" file <Error code: EPERM>. Use --force to continue.
Aborted due to warnings.
Then when running
grunt develop --force
I get this error:
Running "less:css/main.css" <less> task
Fatal error: Unable to write "css/main.css" file <Error code: EPERM>.
Any help you could provide on this would be most helpful,
thanks.
Update 1:
This is my Gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
watch: {
less: {
files: ['**/*.less', '!less/_compiled-main.less'],
tasks: 'less'
},
html: {
files: ['preview-template.html', 'js/**/*.js', 'less/**/*.less', '!less/_compiled-main.less'],
tasks: ['includeSource', 'add-dont-edit-prefix-to-preview-html']
},
wysiwyg: {
files: ['less/wysiwyg.less'],
tasks: 'generate-wysiwyg-styles-js'
}
},
less: {
'css/main.css': 'less/_compiled-main.less',
'css/wysiwyg.css': 'less/wysiwyg.less',
options: {
dumpLineNumbers: 'comments'
}
},
includeSource: {
options: {
templates: {
},
},
dev: {
files: {
'preview.html': 'preview-template.html',
'less/_compiled-main.less': 'less/main.less'
}
}
},
connect: {
server: {
options: {
base: '.',
port: 8000
}
}
}
});
// Css preprocessor
grunt.loadNpmTasks('grunt-contrib-less');
// Watch for file changes and run other grunt tasks on change
grunt.loadNpmTasks('grunt-contrib-watch');
// Includes all js files in preview-template.html and saves as preview.html.
// Includes all less files in main.less and saves as _compiled-main.less
grunt.loadNpmTasks('grunt-include-source');
// Static http server
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('generate-wysiwyg-styles-js', function(){
var css = grunt.file.read('css/wysiwyg.css');
css = css.replace(/\n/g, '')
var js = '// This file is generated automatically based on wysiwyg.less - don\' edit it directly!\n';
js += '// It needs to exist in JS form so we can include the CSS in the downloaded saved notes file';
js += "\napp.value('wysiwygStyles', '" + css + "');";
grunt.file.write('js/app/wysiwyg-styles.js', js)
})
grunt.registerTask('add-dont-edit-prefix-to-preview-html', function(){
var file = grunt.file.read('preview.html');
var prefix = '<!-- \n\n\n\n Don\'t edit this file, edit preview-template.html instead.' + new Array(20).join('\n') + ' -->';
file = file.replace('<!doctype html>', '<!doctype html>' + prefix)
grunt.file.write('preview.html', file);
});
grunt.registerTask('build-develop', [
'includeSource',
'less',
'generate-wysiwyg-styles-js',
'add-dont-edit-prefix-to-preview-html'
])
grunt.registerTask('develop', [
'build-develop',
'connect:server',
'watch'
]);
}
Try something like this maybe?
less: {
files: {
'css/main.css': 'less/_compiled-main.less',
'css/wysiwyg.css': 'less/wysiwyg.less'
},
options: {
dumpLineNumbers: 'comments'
}
}
Notice the files addition to the less array after grunt.initConfig
Let me know if it works.